<template>
  <div class="vita-cell">
    <div class="vita-cell-hd">
      <slot name="icon"></slot>
    </div>
    <div class="vita-cell-bd" :class="{'vita-cell-primary': primary === 'left' }">
      <p>
        {{title}}
        <slot name="title-extra"></slot>
      </p>
    </div>
    <div class="vita-cell-ft">
      {{{value}}}
    </div>
  </div>
</template>

<script>

  import Icon from './Icon.vue'

  export default {

    components: {
      Icon
    },

    props: {
      title: {
        type: String,
        required: true
      },
      value: {
        type: String
      },
      primary: {
        type: String,
        default: 'left'
      }
    }

  }
  
</script>